<template>
  <a-drawer
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
  >

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading" class="drawer-content">
      <a-form :form="form">

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="网站">
          <ak-select-tag :url="`${cmsUrl.named}?columns=name`" :disabled="!!model.parentId"
                          v-decorator="[ 'cmsId',{rules:getValidatorRolesRequired()}]"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="上级菜单" v-if="!!form.getFieldValue('cmsId')||!!model.cmsId">
          <ak-tree-select :url="`${url.named}?columns=name&specPDTO.specJson=${
          encodeURIComponent(JSON.stringify({type:'eq', column:'cms.id',value:form.getFieldValue('cmsId')||model.cmsId}))
          }&version=${version}`"
                          v-decorator="[ 'parentId',{rules:getValidatorRolesMaxLength(200)}]"/>
        </a-form-item>


        <a-form-item label="菜单名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" v-decorator="[ 'name',  {rules:getValidatorRolesMaxLength(200)}]" />
        </a-form-item>
        <a-form-item label="链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" v-decorator="[ 'url',  {rules:getValidatorRolesMaxLength(200)}]" />
        </a-form-item>
        <a-form-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <ak-editor autocomplete="off" v-decorator="[ 'contentHtml',  {initialValue:''}]" />
        </a-form-item>

        <a-form-item label="logo" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <ak-upload :fileLength="1" type="cms_menu_logo" v-decorator="['logo', {initialValue:''}]"></ak-upload>
        </a-form-item>
        <a-form-item label="轮播" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!form.getFieldValue('parentId')">
          <ak-upload :fileLength="3" type="cms_menu_banners" v-decorator="['banners', {initialValue:''}]"></ak-upload>
        </a-form-item>
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number  v-decorator="['sort', {initialValue:0,rules:getValidatorRolesRequired()}]"></a-input-number>
        </a-form-item>

        <a-form-item label="展示二级菜单" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-switch v-decorator="['showChildrenMenu', {rules:getValidatorRolesRequired()}]"></a-switch>
        </a-form-item>

        <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" v-decorator="[ 'title',  {rules:getValidatorRolesMaxLength(200)}]" />
        </a-form-item>
        <a-form-item label="关键字" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" v-decorator="[ 'keywords',  {rules:getValidatorRolesMaxLength(200)}]" />
        </a-form-item>
        <a-form-item label="页面描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea autocomplete="off" v-decorator="[ 'description',  {rules:getValidatorRolesMaxLength(200)}]" />
        </a-form-item>
        <a-form-item label="js 增强" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea autocomplete="off" v-decorator="[ 'scriptAdd']" />
        </a-form-item>
        <a-form-item label="css 增强" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea autocomplete="off" v-decorator="[ 'styleAdd']" />
        </a-form-item>
      </a-form>
    </a-spin>


    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>

  import AkUpload from '../../../components/akfh/AkUpload'
  import {cmsUrl, cmsMenuUrl} from '../../../api/url'
  import AkfhModelDrawMixin from "../../../mixin/AkfhModelDrawMixin";
  import AkTreeSelect from "../../../components/akfh/AkTreeSelect";
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import AFormItem from 'ant-design-vue/es/form/FormItem'
  import AkSelectTag from '../../../components/akfh/AkSelectTag'
  import AkEditor from '../../../components/akfh/AkEditor'
  import { getAction } from '../../../api/manage'

  export default {
    name: "CmsMenuModal",
    mixins:[AkfhModelDrawMixin],
    components: {
      AkEditor,
      AkSelectTag,
      AFormItem,
      ATextarea,
      AkTreeSelect,
      AkUpload,
    },
    data () {
      return {
        entity:'CmsEntity',
        url: cmsMenuUrl,
        cmsUrl:cmsUrl

      }
    },
    methods: {
      afterFullData() {
        if(this.model.id){
          getAction(this.url.getContentHtml, {id:this.model.id})
            .then(res=>{
              if(res.success){
                this.form.setFieldsValue({"contentHtml":res.result})
              }
            })
        }
        if(this.model.showChildrenMenu == null || this.model.showChildrenMenu == undefined){
          this.model.showChildrenMenu = false;
        }

      },

      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        this.drawerWidth = screenWidth;

      },
    }
  }
</script>

<style scoped>

</style>
